<template>
	<div>
		<div class="box">
			<van-icon name="arrow-left" @click="fanhui"/>
			<van-search
				placeholder="雅诗兰黛"
				v-model="value"
				shape="round"
			/>
			  <div slot="action" @click="onSearch">搜索</div>
			</van-search>
		</div>

		<van-grid :border="false" :column-num="2">
			<van-grid-item :gutter="10" v-for="item in list" @click="tap(item._id)" class="sp">
				<van-image :src="item.coverImg" />
				<div class="desc">
					<p class="name">{{item.name}}</p>
					<p class="price"> ￥ {{item.price}}</p>
					<van-icon name="shopping-cart-o" class="gw" @click.stop="add(item._id)"/>
				</div>
			</van-grid-item>
		</van-grid>
		
		<p class="iconfont icon-wpicon-shangjiantou" v-if="scrollY" @click="backTop"></p>
	</div>
</template>

<script>
	import * as api from '../api/getProlist'
	export default{
		name:"Fashion",
		data(){
			return{
				title:"五色糖潮品",
				list:[],
				value:'',
				scrollY:''
			}
		},
		mounted() {
			this.$emit('toparent', this.title)
			window.addEventListener('scroll', this.scrollToTop)
		},
		destroyed () {
		  window.removeEventListener('scroll', this.scrollToTop)
		},
		methods:{
			// 点击回到顶部方法，加计时器是为了过渡顺滑
			  backTop () {
			    const that = this
			    let timer = setInterval(() => {
			      let ispeed = Math.floor(-that.scrollTop / 5)
			      document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed
			      if (that.scrollTop === 0) {
			        clearInterval(timer)
			      }
			    }, 16)
			},
			// 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
			  scrollToTop () {
			    const that = this
			    let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
			    that.scrollTop = scrollTop
			    if (that.scrollTop > 200) {
			      that.scrollY = true
			    } else {
			      that.scrollY = false
			    }
			  },
			fanhui(){
				this.$router.go(-1)
			},
			onSearch(){
				api.getProlist({
					per: 80,
					page: 1,
					name: this.value,
					product_category: [],
				}).then((data)=>{
					this.list = data.data.products
				})
			},
			onClickLeft(){
				this.$router.go(-1)
			},
			tap(id){
				console.log(id)
				this.$router.push('/detail/'+id)
			},
      add(id){
      	console.log(id)
      	api.getAddcart({
      		product:id,
      		quantity:1,
      	}).then((data)=>{
      		console.log(data)
      		this.$toast('加入购物车成功')
      	})
      }
		},
    }
</script>

<style scoped="">
	.icon-wpicon-shangjiantou {
		font-size: 20px;
		position: fixed;
		bottom: 20px;
		right: 30px;
		color: #fff;
		text-align: center;
		line-height: 30px;
		width: 30px;
		height: 30px;
		border-radius: 50%;
		background: #666;
		opacity: 0.7;
	}
  .van-icon,
  .van-icon::before {
  	color: #FFF;
  	font-size: 12px;
  }
  .van-grid{margin-top: 46px;}
  .van-search__content{
  	width: 293px;
  	height: 25px;
  }
  .van-image{
  	width: 152px;
  	height: 152px;
  }

  .gw{
  	font-size: 16px;
  	width: 24px;
  	height: 24px;
  	border: 1px solid #d5616e;
  	border-radius: 50%;
  	text-align: center;
  	line-height: 24px;
  	background: #d5616e;
  	color: #efd1d1;
  	position: absolute;
  	right: 13px;
  	bottom: 20px;
  }
  .price{color: #d88694;font-size: 12px;}
  .name{width: 130px;}
  .sp{border-right: 2px solid #f9f9f9;border-bottom: 2px solid #f9f9f9;}
.box{
		display: flex;
		justify-content: space-around;
		height: 40px;
		width: 100%;
		line-height: 40px;
		border-bottom: 1px solid #efefef;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 2;
		background: #fff;
	}
	.icon-liebiao{
		font-size: 16px;
		margin-left: 13px;
	}
	.van-icon-arrow-left:before{
		line-height: 40px;
		font-size: 14px;
    color: #333;
	}
	.box div{margin-right: 2px;}
	.van-search{
		padding: 0;
	}
	.van-search__content{
		width: 238px;
		height: 25px;
	}
	.van-tabs{
		margin-top: 40px;
	}
	.van-tree-select__nav,.van-tree-select__content{
		overflow: initial;
	}
	body,html{height: 100%;}
	.van-tree-select{
		height: 100%;
	}
	button{
	  width:84px;
	  height:20px;
	  background: #eff3f6;
	  padding-left:10px;
	  color: #9ca1a4;
	  border: 0;
	  margin:0 10px 10px;
	  border-radius:10px;
	  font-size: 10px;
	  line-height: 20px;
	}
	.van-icon{
		color: #df6770;
	}
	p{
		margin-left: 10px;
	}
	img{width: 20px;height: 48px;}
</style>
